<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link type="text/css" rel="stylesheet" href="__PUBLIC__/Admin/css/style.css" />
	<script type="text/javascript" src="__PUBLIC__/Admin/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/Admin/js/menu.js"></script>
	<style type="text/css">
		html{
			overflow-y: scroll;
		}
		#addform{
			
			margin: 15px auto 10px auto;
		}
		table{
			width: 100%;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
		}
		table th{
			background-color: #11B6B6;
			color: white;
			font-family: "微软雅黑";
		}
		#pageinfo{
			margin: 15px auto;
			text-align: center;
		}
		#updateform{
			width: 450px;
			background: white;
			height: 150px;
			border: solid 3px #DDDDDD;
			position: absolute;
			top: 25%;
			left: 25%;
			display: none;
			
		}
		#updateform p{
			margin-top: 20px;
			margin-left: 20px;
		}
		#spanX{
			position: absolute;
			top: 2px;
			right: 3px;
		}
	</style>
</head>
<body>
	<div class="right-nav">
          <ul>
              <li><img src="__PUBLIC__/Admin/images/home.png"></li>
                <li style="margin-left:25px;">您当前的位置：</li>
                <li><a href="__MODULE__/Index/index">分类设置</a></li>
                <li>></li>
                <li><a href="#">分类信息设置</a></li>
            </ul>
      </div>
	<div id="addform">
		<form action="__URL__/insert" method="post">
			<span>添加:</span>
			<select name="parentid">
				<option value="0">顶级分类</option>
				  <foreach name="cats" item="cat" >
				
				<option value="{$cat.cat_id}">
					<?php echo str_repeat("&nbsp;&nbsp;", $cat['level']);?>
					{$cat.cat_name}
				</option>
				</foreach>
			</select>
			<span>分类:</span><input type="text" name="catname"/>
			<span>排序:</span><input type="text" name="sort_order" value="50" style="width:20px;"/>
			<input type="submit" value="添加" />
		</form>
	</div>
	
    	<div class="list-div" id="listDiv">
			<table  id="list-table">
				<tbody>
					<tr>
						<th>分类名称</th>
						<th>信息数量</th>
						<th>排序</th>
						<th>修改</th>
						<th>删除</th>
					</tr>
		        
		        <foreach name="cats" item="cat" >
					<tr align="center" class="{$cat.level}" id="{$cat.level}_{$cat.cat_id}">
							<td align="left" class="first-cell">
		        <?php echo str_repeat("&nbsp;&nbsp;",$cat['level'])." ";?>
								<img src="__PUBLIC__/Admin/images/menu_minus.gif" id="icon_{$cat.level}_{$cat.cat_id}" width="9" height="9" border="0" style="margin-left:0em" onclick="rowClicked(this)">
								<span>{$cat.cat_name}</span>
							</td>
							<td>0</td>
							<td>{$cat.sort_order}</td>
							<td><a href="JavaScript:;" onclick="funAjax('{$cat.cat_id}',
																		'{$cat.cat_name}',
																		'{$cat.sort_order}',
																		'{$cat.parent_id}');">编辑</a></td>
							<td><a href="__URL__/delete/id/{$cat.cat_id}" onclick="JavaScript: return confirm('你确定要删除吗?')">删除</a></td>
					</tr>
		        </foreach>
				</tbody>
		  	</table>
		</div>
	
	<div id="updateform">
		<form action="__URL__/update" method="post">
			<p>
				<span>父分类:</span>
				<select name="parentid" id="parentid">
					<option value="0">顶级分类</option>
				<foreach name="cats" item="cat" >
					<option value="{$cat.cat_id}">
						<?php echo str_repeat("&nbsp;&nbsp;", $cat['level'])."";?>
						 {$cat.cat_name}
					</option>
				   </foreach>
				</select>
			</p>
			<p>
				<span>分类名称:</span><input type="text" id="catname" name="catname"/>
				<input type="hidden" id="catid" name="catid"/>
				<span>排序:</span><input type="text" id="updatsort" name="sort_order" value="" style="width:20px;" />
			</p>
			<p>
				<span>　　　　　　　　　　　　　　　　　　</span><input type="submit" value="修改" />
			</p>
		<span id="spanX"><a href="JavaScript:;">×</a></span>
	</form>
	</div>
	<p id="pageinfo">{$pageinfo}</p>
	<script type="text/javascript">
		function funAjax(id,cat_name,order,parentid){
			document.getElementById("updateform").style.display="block";
			document.getElementById("catid").value=id;
			document.getElementById("parentid").value=parentid;
			document.getElementById("updatsort").value=order;
			document.getElementById("catname").value=cat_name;
		}
		var closewind=document.getElementById("spanX");
		closewind.onclick=function(){
			document.getElementById("updateform").style.display="none";
		}
	</script>
	
	<script>
	/**
	 * 折叠分类列表
	 */
	var imgPlus = new Image();
	imgPlus.src = "__PUBLIC__/Admin/images/menu_plus.gif";
	
	function rowClicked(obj)
	{
	  // 当前图像
	  img = obj;
	  // 取得上二级tr>td>img对象
	  obj = obj.parentNode.parentNode;
	  // 整个分类列表表格
	  var tbl = document.getElementById("list-table");
	  // 当前分类级别
	  var lvl = parseInt(obj.className);
	  // 是否找到元素
	  var fnd = false;
	  var sub_display = img.src.indexOf('menu_minus.gif') > 0 ? 'none' : 'table-row' ;
	  // 遍历所有的分类
	  for (i = 0; i < tbl.rows.length; i++)
	  {
	      var row = tbl.rows[i];
	      if (row == obj)
	      {
	          // 找到当前行
	          fnd = true;
	          //document.getElementById('result').innerHTML += 'Find row at ' + i +"<br/>";
	      }
	      else
	      {
	          if (fnd == true)
	          {
	              var cur = parseInt(row.className);
	              var icon = 'icon_' + row.id;
	              if (cur > lvl)
	              {
	                  row.style.display = sub_display;
	                  if (sub_display != 'none')
	                  {
	                      var iconimg = document.getElementById(icon);
	                      iconimg.src = iconimg.src.replace('plus.gif', 'minus.gif');
	                  }
	              }
	              else
	              {
	                  fnd = false;
	                  break;
	              }
	          }
	      }
	  }
	
	  for (i = 0; i < obj.cells[0].childNodes.length; i++)
	  {
	      var imgObj = obj.cells[0].childNodes[i];
	      if (imgObj.tagName == "IMG" && imgObj.src != '__PUBLIC__/Admin/images/menu_arrow.gif')
	      {
	          imgObj.src = (imgObj.src == imgPlus.src) ? '__PUBLIC__/Admin/images/menu_minus.gif' : imgPlus.src;
	      }
	  }
	}
	</script>
	
</body>
</html>